<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form toolbar" lay-filter="contentSearchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">分类名称:</label>
                        <div class="layui-input-inline">
                            <div id="search_cate_id" class="ew-xmselect-tree"></div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">数据搜索:</label>
                        <div class="layui-input-inline">
                            <input name="title" class="layui-input" placeholder="输入内容名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn layui-btn-sm icon-btn" lay-filter="contentTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <table id="contentTable" lay-filter="contentTable"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="contentTbBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="putRecycleBin">移入回收站</a>
</script>

<script type="text/html" id="contentStatus">
    <input type="checkbox" lay-filter="tbStateCk" value="{{d.id}}" lay-skin="switch"
           lay-text="展示|隐藏" {{d.status==1?'checked':''}}/>
</script>
<!-- js部分 -->

<script>
    layui.use(['layer', 'form', 'table', 'tableX', 'notice', 'index', 'admin', 'setter', 'dropdown', 'xmSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var tableX = layui.tableX;
        var index = layui.index;
        var admin = layui.admin;
        var setter = layui.setter;
        var notice = layui.notice;
        var xmSelect = layui.xmSelect;
        var categoryList  = [];
        form.render('select', 'contentSearchForm');
        /* 渲染表格 */
        var insTb = tableX.render({
            elem: '#contentTable',
            url: setter.baseServer + '/content/content_list',
            where:{is_del:0},
            page: true,
            limit: 10,
            limits: [10,20],
            height: 'full-235',
            defaultToolbar: [],
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="recycleBin" class="layui-btn layui-btn-danger layui-btn-sm icon-btn"><i class="layui-icon">&#xe640;</i>内容回收站</button>&nbsp;',
                '</p>'].join(''),
            cols: [[
                {field: 'id',title: 'id',width: 80, minWidth: 80},
                {
                    title: '封面', templet: function (d) {
                        var url = d.images || '';
                        return '<img data-index="' + (d.LAY_INDEX - 1) + '" src="' + url + '" class="tb-img-circle" tb-img alt="" style="width: 50px;"/>';
                    }, align: 'center', width: 70, unresize: true
                },
                {field: 'title', title: '标题'},
                {field: 'cate_name', title: '分类',width: 100, minWidth: 100,align: 'left'},
                {field: 'remark', title: '描述',width: 200,  align: 'left'},
                {field: 'status', title: '状态', templet: '#contentStatus' , width: 100},
                {field: 'create_time', title: '添加时间',width: 150,  align: 'center'},
                {title: '操作', toolbar: '#contentTbBar', align: 'center', width: 200, minWidth: 200}
            ]],
            size:'lg',
            done:function(){
                /* 获取内容分类 */
                if(categoryList.length>0){
                    return true;
                }
                admin.req(setter.baseServer + '/content/get_category', function (res) {
                    if (200 === res.code) {
                        $.each(res.data, function (index, item) {
                            categoryList.push({name: item.cate_name, value: item.id,disabled:item.disabled});
                        });
                        // 数据展示到下拉框
                        xmSelect.render({
                            el: '#search_cate_id',
                            data: categoryList,
                            name: 'cate_id',
                            value: 'id',
                            hint: '选择内容分类',
                            radio: true,
                        });
                    }
                });
            }
        });

        /* 表格搜索 */
        form.on('submit(contentTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(contentTable)', function (obj) {
            if ('edit' === obj.event) { // 修改
                operation(obj.data);
            }else if ('putRecycleBin' === obj.event) {
                putRecycleBin(obj);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(contentTable)', function (obj) {
            if ('add' === obj.event) { // 添加
                operation();
            }else if('recycleBin' === obj.event){
                recycleBin();
            }
        });

        /* 数据操作 */
        function operation(Data) {
            if(Data){
                Data.opType = 'edit';
            }else{
                Data={}
                Data.opType = 'add';
            }
            Data.categoryList = categoryList;
            var layIndex=admin.open({
                title: Data.opType=='add'?'添加内容':'编辑内容',
                url: 'view/content/content_edit.html',
                area: ['800px','700px'],
                data: Data,
                end: function () {
                    if (admin.getLayerData(layIndex, 'formOk')) {  // 判断表单操作成功标识
                        insTb.reload();  // 成功刷新表格
                    }
                },
            });
        }



        /* 修改数据状态 */
        form.on('switch(tbStateCk)', function (obj) {
            notice.msg('加载中...', {icon: 4});
            var data = {};
            data.id = obj.elem.value;
            data.status = obj.elem.checked ? 1 : 0;
            admin.req(setter.baseServer + '/content/content_status', data, function (res) {
                notice.destroy();
                if (200 === res.code) {
                    notice.msg('修改状态成功', {icon: 1});
                } else {
                    notice.msg(res.msg, {icon: 2});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox', $('#eDialogTable').next().attr('lay-filter'));
                }
            }, 'post');
        });



        /* 回收站页面 */
        function recycleBin() {
            var layIndex = admin.open({
                title: '内容回收站',
                url: 'view/content/content_recycle.html',
                area: ['800px','700px'],
                end: function () {
                    insTb.reload();  // 成功刷新表格
                },
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    // $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        /* 内容放入回收站 */
        function putRecycleBin(obj) {
            admin.confirm('确定要将内容移入回收站吗？', function (i) {
                layer.closeAll();
                notice.msg('加载中...', {icon: 4});
                var data = {};
                data.id = obj.data.id;
                data.is_del = 1;
                admin.req(setter.baseServer + '/content/content_status', data, function (res) {
                    notice.destroy();
                    if (200 === res.code) {
                        notice.msg('成功放入回收站', {icon: 1});
                        insTb.reload();
                    } else {
                        notice.msg(res.msg, {icon: 2});
                    }
                }, 'post');
            });
        }

    });
</script>
